<template>
    <div class="rx-opinion">

            <div class="rx-opinion-list" v-for="(opinion,index) in opinionList" :key="index">
                <span class="rx-opinion-status" :class="[opinion.checkStatus]">{{opinionMap[opinion.checkStatus]}}</span>
                <div class="rx-opinion-name">{{ opinion.handlerUserName }}({{opinion.handlerUserDeptName}})</div>
                <div class="rx-opinion-time">{{ opinion.createTime }}</div>
                <div class="rx-opinion-time">{{ opinion.remark }}</div>
            </div>

    </div>

</template>

<script>
import MForm from "../js/MForm";
import FormBase from "../js/FormBase";
import {FormApi} from "@/api/FormApi";

export default {
    name: "MOpinion",
    mixins: [MForm,FormBase],
    computed:{
        opinionList(){
            if(this.contextData.opinionHistorys && this.contextData.opinionHistorys.length>0){
                let opinionList = [];
                this.contextData.opinionHistorys.forEach(res=>{
                    if(res.opinionName ==this.metadata.field){
                        opinionList.push(res)
                    }
                })
                return opinionList;
            }
            return [];
        }
    },
    data(){
        return {
            opinionMap: {
                "AGREE":this.i18n('AGREE','同意'),
                "REFUSE":this.i18n('REFUSE','不同意')
            },
        }
    },
    created(){
        this.getOpinionList()

    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        getCheckTypes(){
            FormApi.getCheckTypes().then(res=>{
                if(res.success){
                    this.opinionMap=res.data;
                }
            });
        },
        getOpinionList() {
            debugger

        }

    }
}
</script>

<style scoped>
.rx-opinion .rx-opinion-header {
    display: flex;
    align-items: center;
}
.rx-opinion .rx-opinion-status {
    position: absolute;
    top: 10px;
    right: 17px;
}
.rx-opinion .rx-opinion-list {
    width: 100%;
    min-height: 123px;
    background-color: #f8f8f8;
    border-radius: 4px;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 6px;
    position: relative;
}
.rx-opinion .rx-opinion-name {
    color: #131d2d;
    font-size: 16px;
}
.rx-opinion .rx-opinion-time {
    color: #666666;
    margin-top: 5px;
}
.rx-opinion .AGREE {
    font-weight: bold;
    color: green;
}

.rx-opinion .BACK BACK_SPEC .BACK_TO_STARTOR {
    font-weight: bold;
    color: red;
}

.rx-opinion .SKIP {
    font-weight: bold;
    color: red;
}
</style>
